<template>
  <!-- <img v-if="state.dataKey%2 === 0" :src="state.imgSrc"/>
  <img v-else :src="state.imgSrc" /> -->
  <div class="loss-diagram-wrap-inner">
    <!-- 使用动态key和时间戳强制重新加载图片 -->
    <img 
      v-if="state.calcStart" 
      :src="`${loss01}?t=${timestamp}`" 
      :key="`animation-${timestamp}`" 
    />
    <!-- 否则显示静态初始图片 -->
    <img 
      v-else 
      :src="lossInit"
    />
  </div>
</template>
<script setup lang="ts">
import lossInit from '../../../assets/imgs/loss1/0.png'
import loss01 from '../../../assets/imgs/loadingloss.gif'
import { onMounted, reactive, nextTick, ref } from 'vue';

const props = defineProps({
  calcStart: {
    type: Boolean,
    default: () => false
  }
})

// 使用本地状态控制动画
const state = reactive({
  calcStart: false
})

// 使用时间戳来强制重新加载图片
const timestamp = ref(Date.now());


// 组件挂载时
onMounted(() => {
  nextTick(()=>{
    state.calcStart = true
  })

})

</script>
<style lang="scss" scoped>
.loss-diagram-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .loss-diagram-wrap-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      // margin-left: -16px;
      // margin-top: 5px;
    }
  }
}
</style>